<template>
  <div class="shop-manage">
    <div class="fl">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <div
      v-if="shopId"
      v-loading="loading"
      class="left-container app-main-content-box"
    >
      <app-main-title :title="shopName ? shopName : ''" />

      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="140px"
        label-suffix="："
        size="small"
      >
        <!--        <el-form-item prop="openTimeType" label="类型">-->
        <!--           <el-radio-group v-model="form.openTimeType" class="open_type">-->
        <!--                <el-radio :label="1">营业时间-->
        <!--                  <el-tooltip class="item" effect="dark" content="营业时间为商户24h内设置的店铺营业时间，不设置的时间为店铺非营业时间" placement="top">-->
        <!--                   <span class="el-icon-question"></span>-->
        <!--                  </el-tooltip>-->
        <!--                </el-radio>-->
        <!--                <el-radio :label="2">-->
        <!--                  非营时间-->
        <!--                   <el-tooltip class="item" effect="dark" content="非营业时间为商户24h内设置的店铺非营业时间，不设置的时间为店铺营业时间" placement="top">-->
        <!--                    <span class="el-icon-question"></span>-->
        <!--                   </el-tooltip>-->
        <!--                </el-radio>-->

        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item prop="customParamsOpenTime" label="时间">-->
        <!--          <el-time-picker-->
        <!--            v-model="form.customParamsOpenTime"-->
        <!--            is-range-->
        <!--            value-format="HH:mm"-->
        <!--            format="HH:mm"-->
        <!--            range-separator="~"-->
        <!--            start-placeholder="开始时间"-->
        <!--            end-placeholder="结束时间"-->
        <!--            placeholder="选择时间范围"-->
        <!--          />-->

        <!--        </el-form-item>-->
        <el-form-item prop="orderTypes" label="用餐方式">
          <el-checkbox-group
            v-model="form.orderTypes"
            @change="changeOrdertype"
          >
            <el-checkbox
              v-for="(item, index) in orderTypesOptions"
              :key="index"
              :label="item.label"
            >{{ item.value }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!--        <el-form-item prop="payTypes" label="可支付方式">-->
        <!--          <el-checkbox-group v-model="form.payTypes">-->
        <!--            <el-checkbox-->
        <!--              v-for="(item, index) in payTypesOptions"-->
        <!--              :key="index"-->
        <!--              :label="item.label"-->
        <!--            >{{ item.value }}</el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->
        <div
          v-show="form.orderTypes.findIndex((item) => item == 1) != -1"
          class="order_type"
        >
          <el-form-item prop="hallFoodMode" label="堂食结算模式">
            <el-radio-group v-model="form.hallFoodMode">
              <div>
                <el-radio :label="1">先付款后用餐<span class="falg">(顾客点餐，付款完成后，后厨出票上单，加菜需要再下新单)</span></el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="teaFee"
            :rules="rules.dinePrice"
            label="堂食茶位费"
          >
            <div class="inline_input">
              每人收取<el-input
                v-model="form.teaFee"
                placeholder="请输入内容"
                class="input"
              ><template slot="append">元</template></el-input>
            </div>
            <div class="falg">
              （顾客堂食消费时，订单、小票将自动添加茶位费）
            </div>
          </el-form-item>
        </div>
        <div
          v-show="form.orderTypes.findIndex((item) => item == 2) != -1"
          class="order_type"
        >
          <el-form-item label="打包结算模式">
            <el-radio-group v-model="form.packMode">
              <div>
                <el-radio :label="1">先付款后用餐
                  <span class="falg">(顾客点餐，付款完成后，后厨出票上单，加菜需要再下新单)</span>
                </el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="packFee" :rules="rules.dinePrice" label="打包费用">
            <div class="inline_input">
              每单收取<el-input
                v-model="form.packFee"
                placeholder="请输入内容"
                class="input"
              >
                <template slot="append">元</template>
              </el-input>
            </div>
            <div class="falg">
              （顾客堂食消费时，订单、小票将自动添加打包费）
            </div>
          </el-form-item>
        </div>
        <!--        <el-form-item prop="shopNotice" label="店铺公告">-->
        <!--          <el-input v-model="form.shopNotice" placeholder="请输入" maxlength="50" style="max-width:400px" />-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button
            size="small"
            round
            type="primary"
            @click="submit"
          >保存</el-button>
          <el-button size="small" round @click="fetchData">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getShopManageConfig,
  saveShopManageConfig
} from '@/views/wcyModule/api/shop'
import {
  validateCustomPositiveInt,
  validateCustomTwoDecimal
} from '@/utils/validate'

export default {
  data() {
    const validatorPrice = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入费用'))
      } else if (value < 0 || value > 1000000) {
        callback(new Error('范围0~9999999.99'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        orderTypes: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一种用餐方式',
            trigger: 'change'
          }
        ],
        // openTimeType:[
        //   {
        //     required: true,
        //     message: "请至少选择一种营业类型",
        //     trigger: "change",
        //   },
        // ],
        // payTypes: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: '请至少选择一种支付方式',
        //     trigger: 'change'
        //   }
        // ],
        delayTakeTime: [
          {
            required: true,
            message: '请选择可提前下单时间',
            trigger: 'change'
          }
        ],
        isUseTableNo: [
          { required: true, message: '请选择点餐模式', trigger: 'change' }
        ],
        // customParamsOpenTime: [
        //   { required: true, message: '请选择营业时间', trigger: 'change' }
        // ],
        isOpen: [{ required: true, message: '是否营业', trigger: 'change' }],
        dinePrice: [
          {
            required: true,
            validator: validatorPrice,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      // 用餐方式
      orderTypesOptions: [
        {
          label: 1,
          value: '堂食'
        },
        {
          label: 2,
          value: '打包'
        }
      ],
      // 支付方式
      payTypesOptions: [
        {
          label: 1,
          value: '微信支付'
        },
        {
          label: 3,
          value: '会员钱包'
        }
      ],
      // 时间
      delayTakeTimeOptions: [
        {
          value: 30,
          label: '30分钟'
        },
        {
          value: 60,
          label: '60分钟'
        },
        {
          value: 90,
          label: '90分钟'
        },
        {
          value: 120,
          label: '120分钟'
        }
      ],
      // 状态
      loading: false,
      // 数据
      shopId: '',
      shopName: '',
      form: {
        customParamsOpenTime: '',
        isOpen: true,
        isUseTableNo: true,
        delayTakeTime: '',
        orderTypes: [1],
        payTypes: [1],
        // 打包费用
        packFee: 0,
        packMode: 1,
        // 堂食费用
        teaFee: 0,
        hallFoodMode: 1,
        shopNotice: '',
        openTimeType: 1
      }
    }
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取配置
    fetchData() {
      this.loading = true
      getShopManageConfig({ shopId: this.shopId })
        .then((res) => {
          // 格式化时间
          const data = res.data
          const { openHour, openMin, closeHour, closeMin } = data
          data.customParamsOpenTime = [`${openHour}:${openMin}`, `${closeHour}:${closeMin}`]
          data.payTypes = data.payTypes || [1]
          data.orderTypes = data.orderTypes || [1]
          data.delayTakeTime = data.delayTakeTime || ''
          data.packFee = data.packFee || '0'
          data.teaFee = data.teaFee || '0'
          data.openTimeType = data.openTimeType
          data.packMode = data.packMode || 1
          data.hallFoodMode = data.hallFoodMode || 1
          data.openTimeType = data.openTimeType || 1
          this.form = data
          this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 保存
    submit() {
      this.$refs.form.validate((valid) => {
        console.log(this.form)

        if (valid) {
          console.log(this.form)
          // 格式化时间
          const params = Object.assign({}, this.form)
          const openTime = params.customParamsOpenTime[0].split(':')
          const closeTime = params.customParamsOpenTime[1].split(':')
          params.openHour = openTime[0]
          params.openMin = openTime[1]
          params.closeHour = closeTime[0]
          params.closeMin = closeTime[1]
          params.shopId = this.shopId
          delete params.customParamsOpenTime
          this.loading = true
          saveShopManageConfig(params)
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.loading = false
            })
            .catch((err) => {})
            .finally(() => {})
        }
      })
    },

    // 选中门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.fetchData()
    },
    changeOrdertype(e) {
      console.log(e)
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 左边 */
.left-container {
  overflow: hidden;
}
.order_type {
  .falg {
    color: #bebebe;
  }
  .inline_input {
    display: flex;
    .input {
      max-width: 200px;
      margin-left: 10px;
    }
  }
}
.open_type{
  line-height: 32px !important;
  display: flex;
  height: 32px;
  align-items: center;
  >div{
    display: flex;
    align-content: center;
    div{
      display: inline-block;
      width: 30px;
      height: 30px;
    }
  }
}
</style>
